<script lang="ts" setup>
import {decode} from "../../network/utils/StrUtils.ts";
import TopicReadRoute from "../routes/TopicReadRoute.vue";
import ForumRoute from "../routes/ForumRoute.vue";
import ColRoute from "../routes/ColRoute.vue";
import UserRoute from "../routes/UserRoute.vue";

const props = defineProps({url: {type: String, required: true}});

const httpUrl = function () {
  const u = decode(props.url) || ""
  try {
    if (u.startsWith("http")) {
      return new URL(u)
    }
    if (u.startsWith("/")) {
      return new URL(`https://bbs.nga.cn${u}`)
    }
    return new URL(`https://${u}`)
  } catch (e) {
    console.error(e)
    return new URL('https://www.baidu.com')
  }
}()

interface Location {
  type?: 'forum_list' | 'topic_page' | 'topic_reply' | 'topic_floor' | 'col_list' | 'user_center' | undefined
  path: string
  tid: number | undefined
  stid: number | undefined
  fid: number | undefined
  pid: number | undefined
  uid: number | undefined
  username: string | undefined
  page: number | undefined
}

const ngaPath = [
  '/thread.php',
  '/read.php',
  '/nuke.php'
]

const ngaHosts = [
  'bbs.nga.cn',
  'ngabbs.com',
  'nga.178.com',
  'g.nga.cn'
]

const location = function (): Location | undefined {
  if (!ngaHosts.includes(httpUrl.host)) return undefined
  if (!ngaPath.includes(httpUrl.pathname)) return undefined

  const getId = (key: string): number | undefined => {
    const value = httpUrl.searchParams.get(key);
    if (value == null) return undefined
    return Number(value)
  }

  const pid = /pid(\d+)Anchor/.exec(httpUrl.hash)?.[1]

  const res: Location = {
    path: httpUrl.pathname,
    tid: getId('tid'),
    stid: getId('stid'),
    fid: getId('fid'),
    pid: getId('pid') || (pid ? Number(pid) : undefined),
    uid: getId('uid'),
    username: httpUrl.searchParams.get('username') || undefined,
    page: getId('page')
  }

  switch (res.path) {
    case '/thread.php': {
      if (res.stid) {
        res.type = 'col_list'
      } else if (res.fid) {
        res.type = 'forum_list'
      }
      break
    }
    case '/read.php': {
      if (res.tid && res.pid && res.page) {
        res.type = 'topic_floor'
      } else if (res.pid) {
        res.type = 'topic_reply'
      } else if (res.tid) {
        res.type = 'topic_page'
      }
      break
    }
    case '/nuke.php': {
      if (httpUrl.searchParams.get('func') === 'ucp' && (res.uid || res.username)) {
        res.type = 'user_center'
      }
      break
    }
  }
  return res
}()

// console.log('url', httpUrl)
// console.log('location', location)

</script>

<template>
  <span v-if="!props.url">URL地址为空</span>
  <el-link v-else-if="!location" :href="props.url" target="_blank" type="primary">
    <slot/>
  </el-link>
  <topic-read-route v-else-if="location.type === 'topic_floor'" :hash="`#P${location.pid}`" :page="location.page" :tid="location.tid">
    <slot/>
  </topic-read-route>
  <topic-read-route v-else-if="location.type === 'topic_page'" :page="location.page" :tid="location.tid">
    <slot/>
  </topic-read-route>
  <topic-read-route v-else-if="location.type === 'topic_reply'" :pid="location.pid">
    <slot/>
  </topic-read-route>
  <forum-route v-else-if="location.type === 'forum_list'" :fid="location.fid || 0">
    <slot/>
  </forum-route>
  <col-route v-else-if="location.type === 'col_list'" :stid="location.stid || 0">
    <slot/>
  </col-route>
  <user-route v-else-if="location.type === 'user_center'" :user-id="location.uid" :username="location.username">
    <slot/>
  </user-route>
  <span v-else>未知链接: {{ props.url }}</span>
</template>

<style scoped>

</style>